<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 
        当事件函数传递参数的时候，则事件函数的第一个参数不在默认是event事件对象了
        在事件指令的插值语法区域，默认存在一个变量$event，代表的就是当前事件的event事件对象
        如果传参的事件函数需要event事件对象，我们可以直接把$event显性的传递进事件函数中
       -->
      <h2>count:{{count}}</h2>

      <button @click="addCount(1,$event)">累加1</button>
      <!-- 
        如果事件的逻辑很简单，只要简单的一句操作数据，则可以不用写函数，直接把逻辑代码写在事件的插值区域中就行
       -->

      <button @click="count+=2">累加2</button>
      <button @click="count+=3">累加3</button>

      <!-- 当input在输入的时候（只要表单发生改变就触发）手机input的数据，交给message去保管 -->
      <h2>message:{{msg}}</h2>
      <input type="text" @input="msg=$event.target.value" />
    </div>
  </body>
</html>
<script>
  Vue.config.productionTip = false;
  const vm = new Vue({
    el: '#app',
    data() {
      return {
        count: 0,
        msg: '',
      };
    },
    methods: {
      addCount(n, e) {
        console.log(n, e);
        this.count += n;
      },
    },
  });
</script>
